<template>
  <div class="gd">
    <div class="gd-inner container">
      <div class="visual">
        <div class="title">报表可视化拖拽设计</div>
        <div class="desc">支持EChart和G2Plot图表，海量图表可视化一键生成！</div>
        <div>
          <a class="el-button el-button--success" style="margin-top:20px;" :href="sdc" target="_blank">立即体验</a>
        </div>
      </div>
      <div class="cover">
        <img src="~/static/img/charts.png"/>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/utils/config";
export default {
  name: "GraphicDesign",
  data(){
    return {
      sdc: config.pro.sdc
    }
  }
}
</script>

<style scoped lang="less">
.gd {
  background-color: #f6f6f6;
  background-image: url(~/static/img/gd-bg.png);

  .gd-inner {
    position: relative;
    height: 500px;

    .cover {
      position: absolute;
      bottom: 0;
      left: 28%;
      z-index: 1;
      height: 546px;
      margin-top: -36px;

      img {
        max-height: 546px;
      }
    }

    .visual {
      position: absolute;
      top: 0;
      right: 70%;
      z-index: 2;
      padding-top: 160px;
      padding-bottom: 160px;
      padding-left: 30px;
      background-image: url();
      background-repeat: no-repeat;
      background-position: 10px 120px;

      .title {
        color: #fff;
        font-size: 36px;
        text-shadow: 0 0 3px rgb(0 0 0 / 30%);
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: #94b7fb 2px solid;
      }

      .desc {
        max-width: 280px;
        color: #fff;
        font-size: 16px;
        line-height: 26px;
        text-shadow: 0 0 1px rgb(0 0 0 / 30%);
      }
    }
  }

}
</style>
